<template>
  <div class="container">
    <div class="app-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="代理商信息" name="first">
          <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left" >
            <el-form-item label="代理商名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入代理商名称" />
            </el-form-item>
            <el-form-item label="代理商标识" prop="mark">
              <el-input v-model="form.mark" placeholder="请输入标识" />
            </el-form-item>
            <el-form-item label="联系人名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入联系人名称" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入联系人邮箱" />
            </el-form-item>

            <el-form-item label="代理商所在城市" prop="city">
              <el-input v-model="form.city" placeholder="请输入所在城市" />
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入详细地址" />
            </el-form-item>
    <!--        <el-form-item label="余额" prop="balance">-->
    <!--          <el-input v-model="form.balance" placeholder="请输入余额" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="商家数量" prop="storeNum">-->
    <!--          <el-input v-model="form.storeNum" placeholder="请输入商家数量" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="对应权限" prop="authorize">-->
    <!--          <el-input v-model="form.authorize" placeholder="请输入对应权限" />-->
    <!--        </el-form-item>-->

            <el-form-item label="前台域名" prop="frontDomain">
              <el-input v-model="form.frontDomain" placeholder="请输入前台域名" />
            </el-form-item>
            <el-form-item label="后台域名" prop="afterDomain">
              <el-input v-model="form.afterDomain" placeholder="请输入后台域名" />
            </el-form-item>
<!--            <el-form-item label="法人身份证图片地址" prop="cardUrl">
              <span slot="label" class="space">后台域名</span>
              <el-input v-model="form.cardUrl" placeholder="请输入法人身份证图片地址" />
            </el-form-item> -->
            <el-form-item label="代理商logo" prop="logoUrl">
              <UploadImg @imgUrl="getLogoUrl"></UploadImg>
            </el-form-item>
            <el-form-item label="营业执照" prop="licenseUrl">
              <UploadImg @imgUrl="getLicenseUrl"></UploadImg>
              <!-- <el-input v-model="form.licenseUrl" placeholder="请输入营业执照图片地址" /> -->
            </el-form-item>
            <el-form-item label="承诺函" prop="commitmentUrl">
              <UploadImg @imgUrl="getCommitmentUrl"></UploadImg>
              <!-- <el-input v-model="form.commitmentUrl" placeholder="请输入承诺函图片地址" /> -->
            </el-form-item>
    <!--        <el-form-item label="帐号状态" prop="status">-->
    <!--          <el-select v-model="form.status" placeholder="请选择帐号状态">-->
    <!--            <el-option-->
    <!--              v-for="dict in dict.type.sys_agent"-->
    <!--              :key="dict.value"-->
    <!--              :label="dict.label"-->
    <!--              :value="dict.value"-->
    <!--            ></el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
            <el-form-item prop="daterangeCreateTime">
              <span slot="label" class="space">承诺有效期</span>
              <el-date-picker v-model="daterangeCreateTime" value-format="yyyy-MM-dd" type="daterange"
                range-separator="--" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
<!--            <el-form-item label="有效期开始时间" prop="startTime">
              <el-date-picker clearable
                v-model="form.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择有效期开始时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="有效期结束时间" prop="endTime">
              <el-date-picker clearable
                v-model="form.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择有效期结束时间">
              </el-date-picker>
            </el-form-item> -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="接口价格配置" name="second">
          <el-form ref="form2" :model="form2" :rules="rules2" label-width="180px" label-position="left" >
            <el-form-item label="身份查询接口" prop="identityPrice">
              <el-input v-model="form2.identityPrice" placeholder="请输入接口价格" />
            </el-form-item>
            <el-form-item label="信贷风险查询接口" prop="creditPrice">
              <el-input v-model="form2.creditPrice" placeholder="请输入接口价格" />
            </el-form-item>
            <el-form-item label="不良信息查询接口" prop="negativePrice">
              <el-input v-model="form2.negativePrice" placeholder="请输入接口价格" />
            </el-form-item>
            <el-form-item label="个人工商信息查询接口" prop="commercialPrice">
              <el-input v-model="form2.commercialPrice" placeholder="请输入接口价格" />
            </el-form-item>

            <el-form-item label="学历查询接口" prop="educationPrice">
              <el-input v-model="form2.educationPrice" placeholder="请输入接口价格" />
            </el-form-item>
            <el-form-item label="学位核实查询接口" prop="degreePrice">
              <el-input v-model="form2.degreePrice" placeholder="请输入接口价格" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="app-box">
      <AddFooter :price="this.form.price" @submitForm="submitForm"></AddFooter>
    </div>
  </div>
</template>

<script>
  import { listAgentManage, getAgentManage, delAgentManage, addAgentManage, updateAgentManage, addInterfacePrice, resetInterfacePrice } from "@/api/agent/agentManage";
  import UploadImg from "@/components/UploadImg/index";
  import AddFooter from "@/components/AddFooter/index";
  export default {
    name: "addAgent",
    components: {
      UploadImg,
      AddFooter
    },
    data() {
      return {
        // 时间范围
        daterangeCreateTime: [],
        requireChecked: '',
        activeName: 'first',
        // 表单参数
        form: {},
        form2: {},
        priceId: '',
        // 表单校验
        rules: {
          name: [
            { required: true, message: "代理商名称不能为空", trigger: "blur" }
          ],
          mark: [
            { required: true, message: "代理商标识不能为空", trigger: "blur" }
          ],
          userName: [
            { required: true, message: "联系人名称不能为空", trigger: "blur" }
          ],
          phone: [
            { required: true, message: "手机号不能为空", trigger: "blur" }
          ],
          password: [
            { required: true, message: "密码不能为空", trigger: "blur" }
          ],
          email: [
            { required: true, message: "邮箱不能为空", trigger: "blur" }
          ],
          city: [
            { required: true, message: "代理商所在城市不能为空", trigger: "blur" }
          ],
          address: [
            { required: true, message: "详细地址不能为空", trigger: "blur" }
          ],
          frontDomain: [
            { required: true, message: "前台域名不能为空", trigger: "blur" }
          ],
          afterDomain: [
            { required: true, message: "后台域名不能为空", trigger: "blur" }
          ],
          logoUrl: [
            { required: true, message: "logo不能为空", trigger: "change" }
          ],
          licenseUrl: [
            { required: true, message: "营业执照不能为空", trigger: "change" }
          ],
          commitmentUrl: [
            { required: true, message: "承诺函不能为空", trigger: "change" }
          ],
        },
        rules2: {
          identityPrice: [
            { required: true, message: "身份查询接口价格不能为空", trigger: "blur" }
          ],
          creditPrice: [
            { required: true, message: "信贷风险查询接口价格不能为空", trigger: "blur" }
          ],
          negativePrice: [
            { required: true, message: "不良信息查询接口价格不能为空", trigger: "blur" }
          ],
          commercialPrice: [
            { required: true, message: "个人工商信息查询接口价格不能为空", trigger: "blur" }
          ],
          educationPrice: [
            { required: true, message: "学历查询接口价格不能为空", trigger: "blur" }
          ],
          degreePrice: [
            { required: true, message: "学位核实查询接口价格不能为空", trigger: "blur" }
          ],
          userName: [
            { required: true, message: "联系人名称不能为空", trigger: "blur" }
          ]
        },
      }
    },
    watch: {
      '$route.query.type': function(newVal, oldVal) {
        if (newVal === 'edit') {
          this.getInfo();
        } else {
          this.form = {};
          this.form2 = {};
        }
      }
    },
    created() {
      if (this.$route.query.id) {
        this.getInfo();
      }
    },
    methods: {
      // 获取图片链接
      getLogoUrl(newImgUrl) {
        this.form.logoUrl = newImgUrl;
      },
      getLicenseUrl(newImgUrl) {
        this.form.licenseUrl = newImgUrl;
      },
      getCommitmentUrl(newImgUrl) {
        this.form.commitmentUrl = newImgUrl;
      },
      // 获取用户信息
      async getInfo() {
        const response = await getAgentManage(this.$route.query.id);
        this.form = response.data;
      },
      // 标签页切换
      handleClick(tab, event) {
      },
      /** 提交按钮 */
      submitForm() {
        if (this.activeName === "first") {
          this.form.startTime = this.daterangeCreateTime[0];
          this.form.endTime = this.daterangeCreateTime[1];
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.$route.query.id!= null) {
                updateAgentManage(this.form).then(response => {
                  this.$modal.msgSuccess("修改代理商信息成功");
                  this.activeName = 'second';
                });
              } else {
                addAgentManage(this.form).then(response => {
                  this.priceId = response.data;
                  this.$modal.msgSuccess("新增代理商信息成功");
                  this.activeName = 'second';
                });
              }
            }
          });
        } else {
          this.$refs["form2"].validate(valid => {
            if (valid) {
              if (this.$route.query.id!= null) {
                this.form2.agentId = this.$route.query.id;
                resetInterfacePrice(this.form2).then(response => {
                  this.$modal.msgSuccess("修改价格配置成功");
                  this.$router.push({ path: '/agentManage/index' });
                });
              } else {
                this.form2.agentId = this.priceId;
                addInterfacePrice(this.form2).then(response => {
                  this.$modal.msgSuccess("价格配置成功");
                  this.$router.push({ path: '/agentManage/index' });
                });
              }
            }
          });
        }
      },
      // 取消
      back() {
        this.$router.back();
      },

      // 取消按钮
      cancel() {
        this.$router.back();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

    },
  }
</script>

<style lang="scss" scoped>
  .container {
    margin: 20px;
    text-align: center;
    .el-form {
      width: 40%;
      margin: auto;
      .el-input {
        width: 290px;
        // height: 36px;
      }
      .space::before {
        content: '...';
        margin-left: -2.5px;
        color: #ffffff;
      }
      .el-date-picker {
        width: 300px;
      }
    }
    .el-tabs {
      margin: 0 34px;
    }
    .content {
      .title {
        margin-left: 0;
        width: 109px;
        height: 17px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #1F232B;
      }
      .type {
        margin-left: 95px;
        margin-top: 20px;
        width: 57px;
        height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
      .title {
        color: gray;
      }
      .box-group {
        margin-left: 75px;
        display: flex;
        .box-card {
          width: 250px;
          height: 110px;
          border-radius: 5px;
          border: 1px solid #DCDCDC;
          margin: 20px;
          position: relative;
          cursor: pointer;
          .img {
            position: absolute;
            transform: translateY(15px);
          }
          .text {
            margin: 20px;
            font-size: 14px;
          }

        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      .text-wrapper_18 {
        width: 120px;
        height: 15px;
        display: flex;
        align-items: center;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
        margin: 46px 0 0 67px;
        .el-button {
          margin: 0 20px;
          text-align: right;
          background-color: rgba(83, 94, 131, 1);
          border-radius: 4px;
          height: 36px;
          width: 78px;
        }
      }

      .text_95 {
        width: 120px;
        height: 15px;
        overflow-wrap: break-word;
        color: rgba(31, 35, 43, 1);
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 14px;
      }

      .text_96 {
        width: 120px;
        height: 15px;
        overflow-wrap: break-word;
        color: rgba(214, 75, 36, 1);
        font-size: 18px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 18px;
      }

    }
  }
</style>
